<!DOCTYPE html>
<html>
<head>
    <title>Jia Family Resource Distribution</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="resourcePieChart"></canvas>
    </div>

    <script>
        const ctx = document.getElementById('resourcePieChart').getContext('2d');
        new Chart(ctx, {
            type: 'pie',
            data: {
                labels: [
                    'Household Staff & Maintenance (30%)',
                    'Social Events & Entertainment (25%)',
                    'Luxury Goods & Personal Items (20%)',
                    'Garden & Estate Upkeep (15%)',
                    'Gifts & Social Obligations (10%)'
                ],
                datasets: [{
                    data: [30, 25, 20, 15, 10],
                    backgroundColor: [
                        '#FF6384',
                        '#36A2EB',
                        '#FFCE56',
                        '#4BC0C0',
                        '#9966FF'
                    ]
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Distribution of Jia Family Resources Across Consumption Categories',
                        font: {
                            size: 16
                        }
                    },
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: {
                                size: 14
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>